<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存盘点</title>
    <link rel="stylesheet" href="../../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/cangKu/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/font_i6a3ds1y1cc/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/font_w2o0np88fp/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/font_2yyplo81kd3/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/font_7d5zyips3wc/iconfont.css">
    <link rel="stylesheet" href="../../css/cangKuGuanLi/kuCunPanDian.css">
    <script src="../../js/jquery-3.1.1.js"></script>
    <script src="../../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../js/allData.js"></script>
</head>

<body>
    <div class="container ">
        <div class="header">
            <h4>库存盘点</h4>
            <!-- 时间输入框 -->
            <div class="top_box clear">
                <!-- 输入 -->
                <div class="search_box">
                    <div>
                        <label for="">开始时间</label>
                        <input type="date" class="startTime">
                    </div>
                    <div>
                        <label for="">结束时间</label>
                        <input type="date" class="endTime">
                    </div>
                    <div>
                        <label for="">审核状态</label>
                        <select name="" id="">
                            <option value="0">全部</option>
                            <option value="1">待审核</option>
                            <option value="2">审核通过</option>
                            <option value="3">审核拒绝</option>
                        </select>
                    </div>
                    <div>
                        <label for="">搜索</label>
                        <input type="text" class="danhao" onfocus="this.placeholder=''"
                            onblur="this.placeholder='请输入入库单号'" placeholder="请输入入库单号">
                    </div>
                </div>
                <div class="search_btn_box">
                    <button type="button" class="chongzhi"><span class="iconfont icon-reset">重置</span></button>
                    <button type="button" class="chaxun"><span class="iconfont icon-sousuo">查询</span></button>
                </div>
            </div>
        </div>

    </div>


    <table class="table">
        <thead id="thead">
            <tr>
                <th>全选</th>
                <th>盘点日期</th>
                <th>盘点单号</th>
                <th>制单人</th>
                <th>审核状态</th>
                <th>审核人</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody id="tbody">

        </tbody>
    </table>
    <div>
        <div class="footer">
            <button type="button" class="shanchu"><span class="iconfont icon-shanchu"></span> 删除</button>
            <button type="button" class="daochu"><span class="iconfont icon-daochu-xian"></span> 导出</button>
        </div>
        <div class="page_box clear">
            <div class="pageNum">
                <span>共<span>10</span>页/ <span>100</span>条数据</span>
                <div class="pageBtn_box clear">
                    <div id="preBtn" onclick="prevBtn()">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </div>
                    <div id="pageBox">

                    </div>
                    <div id="nextBtn" onclick="nextBtn()">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </div>
                </div>

                <div class="tiaozhuan_box">
                    <span>转至</span>
                    <input type="text" value="1" id="tiaozhuan">
                    <span>页</span>

                    <a href="#" onclick="tiaozhuan()">跳转</a>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body">
                    <p>您确定要删除吗该条数据吗？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="del()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- 提示框 -->

    <div class="tishikuang">
        <i class="glyphicon glyphicon-ok"></i>
        删除成功
    </div>




    <script>
        //1.获取节点
        let maxPage;
        let thePage = 0;
        let fenyeList = kuCunPanDianList;

        // 渲染页面
        function showTable(data) {
            $('#tbody').html('');
            $.each(data, (index, item) => {
                $('#tbody').append(`
                    <tr>
                        <td>
             <input type="checkbox">
         </td>
                        <td>${item.date}</td>
                        <td>${item.danhao}</td>
                        
                        <td>${item.zhidan}</td>
                        <td>${item.zhuangtai}</td>
                        <td>${item.shenheren}</td>
                  
                        <td>
                            <button class="btn_chakan">
                                <i class="glyphicon glyphicon-eye-open"></i>
                            </button>
                            <button class="btn_shanchu del" data-id = '${item.date}' data-item = '${JSON.stringify(item)}'>
                                <i class="glyphicon glyphicon-trash"></i>    
                            </button>
                        </td>
                    </tr>
                `)
            })
        }




        // 根据数据源渲染每一页的数据
        function fenye(data, yema) {
            let qishiye = (yema - 1) * 9;
            let xuanranArr = data.slice(qishiye, qishiye + 9);
            showTable(xuanranArr);

            thePage = yema;

            let num = $('.pageItem').text();
            // console.log(num.length);
            for (let i = 0; i < num.length; i++) {
                $('.pageItem').eq(i).css({
                    backgroundColor: '',
                    color: '#969494'
                })
            }
            $('.pageItem').eq(yema - 1).css({
                backgroundColor: '#6554C0',
                color: '#fff'
            })
        }

        showTable(kuCunPanDianList)
        fenye(kuCunPanDianList, 1)



        // 根据页码渲染分页按钮
        function xuanranPage(data) {
            maxPage = Math.ceil(data.length / 9);
            $('#pageBox').html('')
            for (let i = 1; i <= maxPage; i++) {
                $('#pageBox').append(`
                    <div class='pageItem'>${i}</div>
                `)
            }
        }
        xuanranPage(kuCunPanDianList)
        fenye(kuCunPanDianList, 1)

        // 点击按钮，实现页面渲染新数据
        $('#pageBox').on('click', '.pageItem', function () {
            let num = parseInt($(this).text());
            fenye(kuCunPanDianList, num)
        })

        // 上一页
        function prevBtn() {
            if (thePage != 1) {
                let page = thePage - 1;
                fenye(kuCunPanDianList, page)
            }
        }

        //下一页
        function nextBtn() {
            if (thePage < maxPage) {
                let page = thePage + 1;
                fenye(kuCunPanDianList, page)
            }
        }

        // 跳转
        function tiaozhuan() {
            let val = document.getElementById('tiaozhuan').value;
            fenye(kuCunPanDianList, val)
        }

        // 删除
        let num = []
        $('#tbody').on('click', '.del', function () {
            var data_item = JSON.parse($(this).attr('data-item'));
            var data_id = $(this).attr('data-id');
            $('#myModal').modal('toggle')
            num.push(data_id)
        })

        function del() {
            let time
            for (let i = 0; i < kuCunPanDianList.length; i++) {
                if (kuCunPanDianList[i].danhao == num[0]) {
                    kuCunPanDianList.splice(i, 1);
                    num = [];
                    time = setInterval(() => {
                        $('.tishikuang').css({
                            position: 'absolute',
                            top: (size[0] - 100) / 2 + 'px',
                            left: (size[1] - 300) / 2 + 'px',
                            display: 'block'
                        })
                    }, 500);
                    break;
                }
            }
            $('#myModal').modal('hide')
            xuanranPage(kuCunPanDianList);
            fenye(kuCunPanDianList, thePage);
            setTimeout(() => {
                clearInterval(
                    time
                )
                $('.tishikuang').css({
                    display: 'none'
                })
            }, 1500);
        }

        // 查找
        let data
        $('.chaxun').click(function () {
            let startTime = $('.startTime').val();
            let endTime = $('.endTime').val();
            let danhao = $('.danhao').val();

            for (let i = 0; i < fenyeList.length; i++) {

                console.log(fenyeList[i].startTime);

            }

        })

        show(1)
        // 重置
        $('.chongzhi').click(function () {
            fenyeList = kuCunPanDianList
            show(1)
        })

        show(1)

        function show(num) {
            xuanranPage(fenyeList);
            fenye(fenyeList, 1)
        }
  // 提示框
            let size = []

            function tishi() {
                let tishikuang = document.getElementsByClassName('tishikuang');
                let top = document.body.clientHeight
                let left = document.body.clientWidth
                size.push(top, left);
            }
            tishi()
            // console.log(size);
            $('.tishikuang').css({
                position: 'absolute',
                top: (size[0] - 100) / 2 + 'px',
                left: (size[1] - 100) / 2 + 'px',
                display: 'none'
            })


    </script>
</body>

</html>